<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>

$(function(){
 /*   var a=$('div').css(['width','height','background'])
    for(var i in a){
        console.log(a[i])
    }*/
   /* document.onclick=function(){
        //alert(1)
        //$('div').toggleClass('abc')
        var a = $('div').css(['width','height'])

        $.each(a,function(index,value){
            alert(value)
        })

    }*/


$('.nav li').click(function(){
     $(document).scrollTop($('div').eq($(this).index()).offset().top)

})


})

    </script>
    <style>
*{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.div1{
    width: 90%;
    margin: 0 auto;
    height: 700px;
    background: red;
    color: #fff;
    line-height: 700px;
    font-size: 100px;
    text-align: center;
}
.div2{
    width: 90%;
    margin: 0 auto;
    height: 700px;
    background: pink;
    color: #fff;
    line-height: 700px;
    font-size: 100px;
    text-align: center;
}
.div3{
    width: 90%;
    margin: 0 auto;
    height: 700px;
    background: green;
    color: #fff;
    line-height: 700px;
    font-size: 100px;
    text-align: center;
}
.div4{
    width: 90%;
    margin: 0 auto;
    height: 700px;
    background: blue;
    color: #fff;
    line-height: 700px;
    font-size: 100px;
    text-align: center;

}

.nav{
    width: 80px;
    height: 204px;
    position: fixed;
    right: 20px;
    bottom: 40px;
  background: #b6b6b6;

}
.nav li{
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    border-top: 1px solid #b6b6b6;
}

    </style>
</head>
<body>
<ul class="nav">
    <li>div1</li>
    <li>div2</li>
    <li>div3</li>
    <li>div4</li>
</ul>
    <div class="div1">我是DIV1</div>
    <div class="div2">我是DIV2</div>
    <div class="div3">我是DIV3</div>
    <div class="div4">我是DIV4</div>
</body>
</html>